{% extends 'cms/base.html' %}
{% load news_filters %}

{% block title %}
    新闻列表
{% endblock %}

{% block head %}
    <style>
        .left-group {
            margin-right: 20px;
        }
    </style>
    <link rel="stylesheet" href="{% static 'adminlte/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}">
    <script src="{% static 'adminlte/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'adminlte/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script src="{% static 'js/news_list.min.js' %}"></script>
{% endblock %}

{% block content-header %}
    <h1>新闻列表管理</h1>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <form action="" class="form-inline">
                        <div class="form-group left-group">
                            <label for="">时间：</label>
                            {% if start %}
                                <input type="text" class="form-control" name="start" placeholder="起始时间" id="start-picker" readonly value="{{ start }}">
                            {% else %}
                                <input type="text" class="form-control" name="start" placeholder="起始时间" id="start-picker" readonly>
                            {% endif %}
                            <span>-</span>
                            {% if end %}
                                <input type="text" id="end-picker" class="form-control" name="end" placeholder="结束时间" readonly value="{{ end }}">
                            {% else %}
                                <input type="text" id="end-picker" class="form-control" name="end" placeholder="结束时间" readonly>
                            {% endif %}
                        </div>
                        <div class="form-group left-group">
                            <label for="title-input">标题：</label>
                            {% if title %}
                                <input type="text" class="form-control" name="title" id="title-input" placeholder="关键字" value="{{ title }}">
                            {% else %}
                                <input type="text" class="form-control" name="title" id="title-input" placeholder="关键字">
                            {% endif %}

                        </div>
                        <div class="form-group left-group">
                            <label for="category-input">分类：</label>
                            <select name="category" id="" class="form-control">
                                {% if category_id == 0 %}
                                    <option value="0" selected>所有分类</option>
                                {% else %}
                                    <option value="0">所有分类</option>
                                {% endif %}
                                {% for category in categories %}
                                    {% if category_id == category.pk %}
                                        <option value="{{ category.pk }}" selected>{{ category.name }}</option>
                                    {% else %}
                                        <option value="{{ category.pk }}">{{ category.name }}</option>
                                    {% endif %}
                                {% endfor %}

                            </select>
                        </div>
                        <div class="form-group left-group">
                            <button class="btn btn-primary">查询</button>
                        </div>
                        <div class="form-group">
                            <a href="{% url 'cms:news_list' %}">清除查询</a>
                        </div>
                    </form>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>分类</th>
                            <th>发布时间</th>
                            <th>作者</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for news in newses %}
                            <tr>
                                <td><a target="_blank"
                                       href="{% url 'news:news_detail' news_id=news.pk %}">{{ news.title }}</a></td>
                                <td>{{ news.category.name }}</td>
                                <td>{{ news.pub_time | time_format }}</td>
                                <td>{{ news.author.username }}</td>
                                <td>
                                    <a href="{% url 'cms:edit_news' %}?news_id={{ news.pk }}" class="btn btn-info btn-xs">编辑</a>
                                    <button class="btn btn-danger btn-xs delete-btn" data-news-id="{{ news.pk }}">删除</button>
                                </td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    <p class="fa-pull-left">第{{ current_page }}/总共{{ num_pages }}页</p>
                    <div class="card-tools fa-pull-right">
                        <ul class="pagination">
                        {#             上一页#}
                        {% if page_obj.has_previous %}
                            <li class="page-item"><a href="?p={{ page_obj.previous_page_number }}{{ url_query }}" class="page-link">上一页</a>
                            </li>
                        {% else %}
                            <li class="disabled page-item"><a href="javascript:void(0);" class="page-link">上一页</a></li>
                        {% endif %}

                        {# 是否需要出现三个点 #}
                        {% if left_has_more %}
                            <li class="page-item"><a href="?p=1" class="page-link">1</a></li>
                            <li class="page-item"><a href="javascript:void(0);" class="page-link">...</a></li>
                        {% endif %}

                        {# 左边的页码 #}
                        {% for left_page in left_pages %}
                            <li class="page-item"><a href="?p={{ left_page }}{{ url_query }}" class="page-link">{{ left_page }}</a></li>
                        {% endfor %}

                        {# 当前的页面 #}
                        <li class="active page-item"><a
                                href="?p={{ current_page }}{{ url_query }}" class="page-link">{{ current_page }}</a></li>

                        {# 右边的页码 #}
                        {% for right_page in right_pages %}
                            <li class="page-item"><a href="?p={{ right_page }}{{ url_query }}" class="page-link">{{ right_page }}</a></li>
                        {% endfor %}

                        {% if right_has_more %}
                            <li class="page-item"><a href="javascript:void(0);" class="page-link">...</a></li>
                            <li class="page-item"><a href="?p={{ num_pages }}{{ url_query }}" class="page-link">{{ num_pages }}</a></li>
                        {% endif %}

                        {#             下一页#}
                        {% if page_obj.has_next %}
                            <li class="page-item"><a href="?p={{ page_obj.next_page_number }}{{ url_query }}" class="page-link">下一页</a></li>
                        {% else %}
                            <li class="disabled page-item"><a href="javascript:void(0);" class="page-link">下一页</a></li>
                        {% endif %}

                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}